﻿
@{
    ViewBag.Title = "权限信息分配";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>

    <div class="row">
    <div class="col-md-10 col-md-offset-1">
        <div class="panel panel-headline">
            <div class="panel-heading">
                <h3 class="panel-title">权限分配管理页面</h3>
            </div>
            <div class="panel-body">
                <div class="container-fluid">
                   <div class="row">
                       <div class="col-sm-12">
                               <label>请选择要设定的权限: </label>
                               <select id="rolesId" name="rolesId">
                                   @foreach(RolesListViewModel item in ViewBag.RolesList)
                                    {
                                        <option value="@item.Id">@item.Title</option>
                                    }
                                </select>
                                <button id="btnSearch" class="btn btn-primary" >查询</button>
                            
                       </div>
                   </div>
                   <div class="row">

                       <div class="col-sm-5">
                           <h3>已拥有权限</h3>
                           <p>
                               <button id="btnDeleteSelected" class="btn btn-danger">
                                   <i class="fa fa-trash"></i> 删除已选中</button>
                           </p>
                           <table class="table table-bordered table-hover">
                               <thead>
                                   <tr>
                                       <th>
                                           <input type="checkbox" id="ckOwnAll" name="ckOwnAll" />全选
                                       </th>
                                       <th>菜单名称</th>
                                   </tr>
                               </thead>
                               <tbody id="ownTable">

                               </tbody>
                           </table>
                       </div>

                       <div class="col-sm-5">
                           <h3>未拥有权限</h3>
                           <p>
                               <button id="btnAddSekected" class="btn btn-success">
                                   <i class="fa fa-plus-circle"></i> 新增已选中</button>
                           </p>
                           <table class="table table-bordered table-hover">
                               <thead>
                                   <tr>
                                       <th>
                                           <input type="checkbox" id="ckNoOwnAll" name="ckNoOwnAll" />全选
                                       </th>
                                       <th>菜单名称</th>
                                   </tr>
                               </thead>
                               <tbody id="NoOwnTable">

                               </tbody>
                           </table>
                       </div>
                   </div>
                
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts
{
    <script>

        $(function()
        {
            //展示权限
            $("#btnSearch").click(function()
            {
                PageLoad();
            });

            // 全选按钮
            $("#ckOwnAll").change(function()
            {
                let ck = document.getElementsByName("OwnMenuList");
                if(this.checked)
                {
                    for(let i = 0; i < ck.length; i++)
                    {
                        ck[i].setAttribute("checked","true");
                    }
                }
                else
                {
                    for(let i = 0; i < ck.length; i++)
                    {
                        ck[i].removeAttribute("checked");
                    }
                }
            });

            // 移除选中的权限
            $("#btnDeleteSelected").click(function()
            {
                let check = document.getElementsByName("OwnMenuList");
                let arr = new Array();

                for(let i = 0; i < check.length; i++)
                {
                    if(check[i].checked)
                    {
                        arr.push(check[i].value);
                    }
                }

                $.post("../../../ForumManage/AdminPermissions/Deletes",{menuIdList:arr,rolesId:$("#rolesId").val()},function(res)
                {
                    
                    if(res == true)
                    {
                        PageLoad();
                    }

                },"json")

            });
            
            $("#btnAddSekected").click(function()
            {
                let check = document.getElementsByName("NoOwnMenuList");
                let arr = new Array();

                for(let i = 0; i < check.length; i++)
                {
                    if(check[i].checked)
                    {
                        arr.push(check[i].value);
                    }
                }

                $.post("../../ForumManage/AdminPermissions/Adds",{menuIdList:arr,rolesId:$("#rolesId").val()},function(res)
                {
                    if(res == true)
                        PageLoad();

                },"json")

            });

        });

        function PageLoad()
        {
            var rolesId = $("#rolesId").val();
            console.log(rolesId);
            $.get("../../ForumManage/AdminPermissions/GetOwnMenu",{rolesId:rolesId},function(data)
            {
                let str = "";
                for(let i = 0; i < data.ownList.length; i++)
                {
                    str += "<tr>";
                    str += "<td><input type='checkbox' name='OwnMenuList' value='"+ data.ownList[i].menuId +"' /></td>";
                    str += "<td>"+ data.ownList[i].menuTitle +"</td>";
                    str += "</tr>";
                }
                $("#ownTable").html(str);

                let notinStr = "";
                for(let j = 0; j < data.noOwnList.length; j++)
                {
                    notinStr += "<tr>";
                    notinStr += "<td><input type='checkbox' name='NoOwnMenuList' value='"+ data.noOwnList[j].menuId +"' /></td>";
                    notinStr += "<td>"+ data.noOwnList[j].menuTitle +"</td>";
                    notinStr += "</tr>";
                }
                $("#NoOwnTable").html(notinStr);

            },"json");
        }

    </script>
}

</body>
</html>
